Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@cssfn/react-cssfn

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cssfn/react-cssfn

Writes CSS in react hooks.

  • 1.0.11
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

react-cssfn - Writes CSS in (similar) React Hooks

A lib for generating Style Sheet (css) with JavaScript function.
Similar to React Hooks but for generating css dynamically.

By underlying JavaScript language, the css can be easily exported/imported as a regular JavaScript module.

The generated css can be used in your <React Component> easily, something like this:

const useButtonSheet = createUseSheet(() => [
    // ....
]);

const awesomeButtonSheet = useButtonSheet();

return (
    <button className={awesomeButtonSheet.main}>
    </button>
);

Because your stylesheet is a javascript function, your css properties & values can be taken from another javascript objects/variables/functions:

layout({
    display: isVertical ? 'inline-flex' : 'flex', // conditional
    ...anotherStuff(), // using spread operator to define multiple properties
})

Preview

export const usesAwesomeButton = () => composition([
    imports([
        stripoutControl(), // clear browser's default styles
        
        usesButtonBase(), // imports css from a generic button
        
        // imports any stuff here...
    ]),
    layout({
        display       : 'flex',
        flexDirection : 'row',
        background    : 'pink',
        color         : 'darkred',
        
        // writes the css declaration similar to regular css
        
        ...children(['span', '.logo'], [ // target to <span> and class="logo"
            imports([
                // imports any stuff here...
            ]),
            layout({
                // writes the css declaration similar to regular css
            }),
        ]),
    }),
    variants([
        rule('.big', [
            layout({
                fontSize: 'xx-large',
                // ....
            }),
        ]),
        rule('.dark', [
            // ...
        ]),
    ]),
    states([
        rule([':disabled', '.disabled'], [
            // ....
        ]),
    ]),
]);

// attach the css to DOM:
export const useAwesomeButtonSheet = createUseSheet(() => [
    mainComposition([
        imports([
            usesAwesomeButton(),
        ]),
    ]),
    compositionOf('otherClass', [
        imports([
            // ...
        ]),
    ]),
]);

Then we can consume our generated css like this:

export default function AwesomeButton(props) {
    const btnSheet = useAwesomeButtonSheet();
    
    return (
        <>
            <button className={btnSheet.main}>Awesome!</button>
            <button className={btnSheet.otherClass}>Cool!</button>
        </>
    );
}

Features

  • Includes all Vanilla & ES6 JavaScript features.
  • Lazy execution (your function will be executed on demand).
  • Cached - your function only be executed once (or never if not needed).
  • IntelliSense supported - Our cssfn is written in TypeScript (superset of JavaScript).
  • CSS Variable Management - Never write variable name in plain string.
  • CSS Config Management - Shares a common setting to many components.

Installation

Using npm:

npm i @cssfn/react-cssfn

Support Us

If you feel our lib is useful for your projects,
please make a donation to avoid our project from extinction.

We always maintain our projects as long as we're still alive.

[Make a donation]

Keywords

FAQs

Package last updated on 22 Jan 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc